<template>
	<view class="container">
		<view class="phone-info">
			已绑定的手机号: {{userinfo.phone}}
		</view>
		<view class="code-input">
			请输入验证码
			<input type="number" name="yzm" class="verification-code-input" v-model="verificationCode" />
			<button type="primary" class="get-code-button" :disabled="isCountingDown" @click="startCountdown">{{countdownText}}</button>
		</view>
		<view class="next-step">
			<button type="primary" @click="verifyCode">下一步</button>
		</view>
	</view>
</template>

<script>
// index.js
export default {
	data() {
		return {
			userinfo: { phone: '' },
			verificationCode: '',
			isCountingDown: false,
			countdown: 60,
			countdownText: '获取验证码'
	    };
	  },
	methods: {
	    startCountdown() {
			if (this.isCountingDown) return;
			this.isCountingDown = true;
			let interval = setInterval(() => {
				if (this.countdown > 0) {
					this.countdown--;
					this.countdownText = `${this.countdown}秒`;
				} else {
					clearInterval(interval);
					this.isCountingDown = false;
					this.countdownText = '重新获取验证码';
					this.countdown = 60;
				}
			}, 1000);
	    },
	    verifyCode() {
			if (this.verificationCode === '123456') {
				console.log("123")
				wx.navigateTo({
					url: '/pages/index/Grzxml/Xitongshezhiml/Shoujihaoxiugai'
				});
			} else {
				uni.showToast({
					title: '验证码错误',
					icon: 'none',
					duration: 2000
				});
			}
	    }
	},
	onShow() {
	    const userinfo = uni.getStorageSync('userinfo');
	    this.userinfo = userinfo;
	    this.userinfo.phone = userinfo.phone.slice(0, 3) + '*'.repeat(userinfo.phone.length - 3 - 4) + userinfo.phone.slice(-4);
	}
}
</script>

<style>
.container {
  padding: 20rpx;
  box-sizing: border-box;
}

.phone-info {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.code-input {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.verification-code-input {
  flex: 1;
  margin-right: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 10rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
}

.get-code-button {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.next-step button {
  width: 100%;
  margin-top: 20rpx;
}
</style>
